<template>
  <basic-layout title="朋友圈" class="moments-layout" showBack>
    <b-scroll-list
      ref="scrollRef"
      :requestApi="Api.getMoments"
      :requestParams="{ pageSize: 10 }"
      class="moments-list"
    >
      <template #default="{ list }">
        <div class="moments-content">
          <!-- 顶部背景和用户信息 -->
          <div class="moments-header">
            <div class="cover-image" :style="{ transform: `translateY(${translateY}px)` }">
              <van-image
                fit="cover"
                src="https://picsum.photos/seed/cover/800/400"
              />
            </div>
            <div class="user-info" :style="{ opacity: userInfoOpacity }">
              <span class="name">{{ userStore.userInfo?.name }}</span>
              <van-image
                round
                width="70"
                height="70"
                :src="userStore.userInfo?.avatar"
                class="avatar"
              />
            </div>
          </div>

          <!-- 朋友圈列表 -->
          <div class="moment-items">
            <div
              v-for="(item, index) in list"
              :key="item.id"
              class="moment-item"
              :data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
              :data-aos-delay="index * 100"
            >
              <van-image
                round
                width="40"
                height="40"
                :src="item.avatar"
                class="avatar"
              />

              <div class="content">
                <div class="user-name">{{ item.userName }}</div>
                <div class="text">{{ item.content }}</div>

                <!-- 图片网格 -->
                <div class="image-grid" v-if="item.images.length">
                  <van-image
                    v-for="(img, index) in item.images"
                    :key="index"
                    :src="img"
                    fit="cover"
                    :class="['grid-image', `count-${item.images.length}`]"
                    @click="previewImage(item.images, index)"
                  />
                </div>

                <!-- 位置和时间 -->
                <div class="meta-info">
                  <span class="time">{{ formatTime(item.createdAt) }}</span>
                  <span v-if="item.location" class="location">
                    <van-icon name="location-o" />
                    {{ item.location }}
                  </span>
                </div>

                <!-- 互动区域 -->
                <div class="interaction">
                  <div class="actions">
                    <van-button
                      size="small"
                      :icon="item.isLiked ? 'like' : 'like-o'"
                      :class="{ liked: item.isLiked }"
                      @click="toggleLike(item)"
                    >
                      {{ item.likeCount }}
                    </van-button>
                    <van-button
                      size="small"
                      icon="comment-o"
                    >
                      {{ item.commentCount }}
                    </van-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </b-scroll-list>
  </basic-layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showImagePreview } from 'vant'
import { useUserStore } from '@/stores/user'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import { Api } from '@/api'
import type { MomentItem } from '@/api'
import BScrollList from '@/components/common/BScrollList.vue'
import AOS from 'aos'
import 'aos/dist/aos.css'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const userStore = useUserStore()
const scrollRef = ref()
const translateY = ref(0)
const userInfoOpacity = ref(1)

// 预览图片
const previewImage = (images: string[], startPosition: number) => {
  showImagePreview({
    images,
    startPosition,
    closeable: true
  })
}

// 点赞/取消点赞
const toggleLike = (item: MomentItem) => {
  item.isLiked = !item.isLiked
  item.likeCount += item.isLiked ? 1 : -1
}

// 格式化时间
const formatTime = (time: string) => {
  return dayjs(time).fromNow()
}

// 监听滚动效果
const handleScroll = (e: Event) => {
  const scrollTop = (e.target as HTMLElement).scrollTop
  translateY.value = scrollTop * 0.5 // 视差效果
  userInfoOpacity.value = 1 - (scrollTop / 200) // 渐隐效果
}

onMounted(() => {
  // 初始化动画
  AOS.init({
    duration: 800,
    easing: 'ease-out',
    once: true
  })

  // 添加滚动监听
  const scrollEl = document.querySelector('.scroll-container')
  scrollEl?.addEventListener('scroll', handleScroll)
})
</script>

<style lang="less" scoped>
.moments-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f7f8fa;

  .moments-list {
    flex: 1;
    overflow: hidden;

    :deep(.scroll-content) {
      .moments-content {
        min-height: 100%;
        padding-bottom: 20px;
      }
    }
  }

  .moments-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .moments-header {
    position: relative;
    height: 375px;
    margin-bottom: 20px;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 150px;
      background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
      pointer-events: none;
    }

    .cover-image {
      height: 300px;
      overflow: hidden;
      transition: transform 0.1s ease-out;
      will-change: transform;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      :deep(.van-image) {
        width: 100%;
        height: 100%;
        transform: scale(1.2);
        filter: saturate(1.2);
      }
    }

    .user-info {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      gap: 12px;
      transition: all 0.3s ease;

      .name {
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .avatar {
        border: 4px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05) translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }
      }
    }
  }

  .moment-items {
    padding: 0 16px;
    perspective: 1000px; // 3D效果

    .moment-item {
      display: flex;
      gap: 12px;
      padding: 20px;
      margin-bottom: 16px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
                 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      transform-origin: center center;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);

      &:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                   0 2px 4px rgba(0, 0, 0, 0.08);
      }

      .avatar {
        flex-shrink: 0;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.1) rotate(5deg);
        }
      }

      .content {
        flex: 1;
        min-width: 0;

        .user-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
        }

        .text {
          font-size: 15px;
          color: #333;
          margin-bottom: 12px;
          line-height: 1.5;
        }

        .image-grid {
          display: grid;
          gap: 8px;
          margin: 16px 0;

          .grid-image {
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            &:hover {
              transform: scale(1.03) translateY(-4px);
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
              z-index: 1;
            }
          }
        }

        .meta-info {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 12px;
          font-size: 14px;
          color: #999;

          .location {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }

        .interaction {
          display: flex;
          justify-content: flex-end;

          .actions {
            display: flex;
            gap: 8px;

            .van-button {
              padding: 6px 16px;
              border-radius: 20px;
              font-weight: 500;
              transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
              background: #f8f8f8;

              &:hover {
                transform: translateY(-2px);
                background: #f0f0f0;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
              }

              &.liked {
                color: #ee0a24;
                background: rgba(238, 10, 36, 0.15);

                &:hover {
                  background: rgba(238, 10, 36, 0.2);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
